<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.btn_container {
				width: 100%;
				height: 150px;
				border: 1px solid red;
				position: absolute;
			}
			
			.btn_container button {
				width: 100px;
				height: 100px;
				background-color: blueviolet;
				color: white;
				font-size: 20px;
				position: absolute;
				top: 25px;
				display: inline-block;
			}
			
			.borken {
				margin-bottom: 120px;
			}
			
			span {
				font-size: 18px;
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>拖拽改变位置</h1>
		<div class="btn_container" id="btn_container"></div>
		<h1 class="borken">崩坏中，今晚似乎写不完了。。。</h1>
		<script type="text/javascript">
			var container = document.getElementById("btn_container");
			var positionArr = [];

			function createBtn(count) {
				var setCount = count;
				for(var i = 0; i < count; i++) {
					var newBtn = document.createElement("button");
					newBtn.setAttribute("id", "btn" + i);
					newBtn.innerHTML = i;
					container.appendChild(newBtn);
				}
				initialPostion(setCount, ".btn_container button");
			}

			function initialPostion(count, sel) {
				var btnArr = document.querySelectorAll(sel);
				var btnWidth = btnArr[0].offsetWidth;
				for(var j = 0; j < count; j++) {
					var tempPostion = 20 + j * (btnWidth + 20);
					btnArr[j].style.left = tempPostion + "px";
					positionArr.push(tempPostion);
				}
				console.log(positionArr);
				drag(btnArr);
			}

			function drag(objs) {
				for(var i = 0; i < objs.length; i++) {
					objs.index = i;
					objs[i].onmousedown = function(event) {
						event.preventDefault();
						this.disX = event.clientX - this.offsetLeft;
						this.disY = event.clientY - this.offsetTop;
						this.onmousemove = function(event) {
							this.style.left = event.clientX - this.disX;
							this.style.top = event.clientY - this.disY;
						}
					}
				}
			}

			window.onload = function() {
				createBtn(4);

			}
		</script>
		<div class="ques">
			<h1>1.<em>事件绑定</em>和<em>普通事件</em>有什么区别?</h1>
			<h3>普通事件只支持单个事件，重复写多个事件会把前边的覆盖掉。而事件绑定可以添加多个事件</h3>
			<br />
		</div>
		<hr />
		<div class="ques">
			<h1>2.数组方法<em>pop() push() unshift() shift()</em>?</h1>
			<h3>A: push和pop方法，这两个方法只会对数组从尾部进行压入或弹出，
			而且是在原数组进行操作，任何的改动都是会影响到操作的数组。push(args)可以每次
			压入多个元素，并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素
			，并返回弹出的元素，如果是对空组数调用pop()则返回undefined。 如果参数是数组则是
			将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的“拆分现象”
			<br />
			<span>其实就是一个在末尾添加，一个在末尾删除一个元素</span>
			<p>
					unshift() 方法将把它的参数插入数组的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间
			。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
			unshift() 方法不创建新的创建，而是直接修改原有的数组。该方法会改变数组的长度。
			</p>
				<p>	shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
				如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值.不创建新数组，而是直接修改原有的数组。
				该方法也会改变数组的长度.</p>
			
				<span>就是分别从头部删除和添加一个元素</span>
		</h3>
		</div>

		<br />
		<hr />
		<h1>3.ajax请求的时候get和post方式的区别?</h1>
		<p>使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
			<p>使用Get请求发送数据量小,Post请求发送数据量大</p>
			<br />
			<hr />
			<div class="ques">
				<h1>Q:call和apply的区别?
				
		</h1>
				<h3>call方法: </h3> 语法：call(thisObj，Object) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
				<br />
				<br />
				<h3>apply方法： </h3> 语法：apply(thisObj，[argArray]) 定义：应用某一对象的一个方法，用另一个对象替换当前对象。 说明： 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。</h3>
				<br />
				<span>这个好懵逼啊</span>
			</div>
			<hr />
			<div class="ques">
				<h1>A: 事件委托是什么, 使用事件委托有什么好处?</h1>
				<p>
					通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢， 就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来 做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
				</p>
				<span>	好处:提高性能.减少代码，避免了麻烦的循环添加事件的过程。</span>
			</div>
	</body>

</html>